<script setup>
import { ref, onMounted, watch } from 'vue'
import { useUserStore } from '@/stores'
import { getFriendApplyListApi, agreeFriendApi, refuseFriendApi } from '@/api/user'
import { addFriendApi } from '@/api/friend'
import { getGroupInvitationListApi } from '@/api/group'
import { ElMessage } from 'element-plus'

//用户信息
const userStore = useUserStore().getUser()

//通知列表
const noticeList = ref([])

const props = defineProps({
  applyType: {
    type: String,
    default: '',
  },
})
//获取好友申请列表
const getFriendList = async () => {
  const res = await getFriendApplyListApi(userStore.userId)
  noticeList.value = res.data.data
  //转化时间格式
  noticeList.value.forEach((item) => {
    item.requestTime = item.requestTime.replace('T', ' ').slice(0, 19)
  })
}

const getGroupList = async () => {
  const res = await getGroupInvitationListApi(userStore.userId)
  //按照时间先后顺序排序

  noticeList.value = res.data.data
  //转化时间格式
  noticeList.value.forEach((item) => {
    item.requestTime = item.inviteTime.replace('T', ' ').slice(0, 19)
  })
}

///同意好友申请
const handleAgree = async (item) => {
  //转化时间格式

  item.requestTime = item.requestTime.replace(' ', 'T')
  const res = await agreeFriendApi(item)
  if (res.data.code == 1) {
    let data = {
      userId: userStore.userId,
      friendId: item.senderId == userStore.userId ? item.receiverId : item.senderId,
      remarke: item.name,
    }
    await addFriendApi(data)
    data = {
      friendId: userStore.userId,
      userId: item.senderId == userStore.userId ? item.receiverId : item.senderId,
      remarke: item.name,
    }
    await addFriendApi(data)

    ElMessage.success('操作成功')
  }
  getFriendList()
}
//拒绝好友申请
const handleRefuse = async (item) => {
  item.requestTime = item.requestTime.replace(' ', 'T')
  const res = await refuseFriendApi(item)
  if (res.data.code == 1) ElMessage.success('操作成功')
  getFriendList()
}

onMounted(async () => {
  if (props.applyType == 'friend') {
    getFriendList()
  } else {
    getGroupList()
  }
})

//监听applyType变化
watch(
  () => props.applyType,
  (newVal) => {
    if (newVal == 'friend') {
      getFriendList()
    } else {
      getGroupList()
    }
  },
)
</script>

<template>
  <div class="notice-list">
    <div class="title">{{ props.applyType == 'friend' ? '好友申请' : '群组申请' }}通知</div>
    <div class="list">
      <div class="item" v-for="(item, index) in noticeList" :key="index">
        <div class="head">
          <div class="img"><img :src="item.avatar" /></div>
          <div class="info">
            <div class="info-detail">
              <div class="name">{{ item.name }}</div>
              <div class="time">
                {{ item.requestTime }}
              </div>
            </div>
            <div v-if="item.senderId !== userStore.userId" class="msg">
              {{ item.message || '对方向你发来一条好友申请' }}
            </div>
            <div v-else class="msg">{{ item.message || '请求添加对方为好友' }}</div>
          </div>
        </div>
        <div class="tail">
          <div v-if="item.senderId !== userStore.userId && item.status === 0">
            <el-button @click="handleAgree(item)" type="primary">同意</el-button>
            <el-button @click="handleRefuse(item)">拒绝</el-button>
          </div>
          <div
            class="wait-verify"
            v-else-if="item.senderId == userStore.userId && item.status === 0"
          >
            等待验证
          </div>
          <div class="agree" v-else-if="item.status === 1 && item.senderId !== userStore.userId">
            已同意
          </div>
          <div class="refuse" v-else-if="item.status === 2 && item.senderId !== userStore.userId">
            已拒绝
          </div>
          <div class="agree" v-else-if="item.status === 1 && item.senderId == userStore.userId">
            对方已同意
          </div>
          <div class="refuse" v-else-if="item.status === 2 && item.senderId == userStore.userId">
            对方已拒绝
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.agree,
.wait-verify,
.refuse {
  color: #ccc;
  font-size: 14px;
  margin-right: 10px;
}

.notice-list {
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
  .title {
    font-weight: 700;
    margin: 30px;
    margin-bottom: 40px;
  }
  .list {
    .item {
      border-radius: 10px;
      background-color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 10px;
      height: 70px;
      margin-bottom: 20px;
      .head {
        .info {
          .info-detail {
            display: flex;
            font-size: 14px;
            align-items: center;
            .time {
              margin-left: 5px;
              font-size: 12px;
            }
            .name {
              color: hsl(194, 84%, 45%);
            }
          }
          .msg {
            margin-top: 5px;
            font-size: 13px;
          }
        }
        .img {
          margin: 0 10px;
          img {
            width: 45px;
            height: 45px;
            border-radius: 50%;
          }
        }

        display: flex;
      }
      .tail {
        margin-right: 10px;
      }
    }
  }
}
</style>
